<template>
  <div class="home">
    <div class="tops">
      <div class="top-left">
        <a @click="handelclick"><van-icon name="arrow-left" /></a>
      </div>
      <div class="top-center">
        <router-link class="search" to="/search">
          <span><img src="../assets/img/ser.png" alt="" /></span>
          菜坝电商年货节
        </router-link>
      </div>
      <van-icon class="top-rigth" name="ellipsis" />
    </div>
    <div class="content">
      <div class="con-ify">
        <div class="ify">
          <div class="ify-list" v-for="(item, index) in nav" :key="index">
            <div
              v-for="(ite, idx) in item.children"
              :key="ite.id"
              v-show="idx == 0"
            >
              <img :src="imgs + ite.appIcon" alt="" />
            </div>
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
      <div class="goods">
        <div
          class="cardlist"
          v-show="list"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="cradimg">
            <img :src="imgs + item.iconImg" alt="" />
          </div>
          <div class="cradcont">
            <div class="title van-multi-ellipsis--l2">{{ item.name }}</div>
            <div class="subTitle van-multi-ellipsis--l2">
              {{ item.subName }}
            </div>
            <div class="moneys">
              <div class="money"><span>￥</span>{{ item.nowPrice }}</div>
              <div class="num">
                {{ item.virtualSalesCount }}<span>人付款</span>
              </div>
            </div>
            <div class="address">
              <div>
                {{ item.storeName }}<van-icon class="rigthicon" name="arrow" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="load" v-show="loading"><van-loading type="spinner" /></div>
      <!-- <p class="p" >到底了哦...</p> -->
    </div>
  </div>
</template>

<script>
import request from "../utils/request.js";
export default {
  data() {
    return {
      // id: 0,
      pageNo: 0,
      n: 0,
      pageSize: 1,
      nav: [],
      list: [],
      loading: true,
      all: "",
      imgs: "https://caiba-produce.oss-cn-beijing.aliyuncs.com//",
    };
  },
  methods: {
    f1(e) {
      let top = e.srcElement.scrollTop;
      let scrollTop = top;
      let height = 1580;
      let div = document.getElementsByClassName("content")[0];
      let hei1 = div.offsetHeight;
      let hei = height * this.n;
      if (scrollTop >= hei - 667 && scrollTop >= hei1 - 667) {
        this.lazyLoading();
      }
    },
    handelclick() {
      this.$router.push("/");
      window.removeEventListener("scroll", this.f1, true);
    },
    lazyLoading() {
      this.n += 1;
      setTimeout(() => {
        this.pageNo += 1;
        this.pageSize = this.pageSize + 10;
        let url = `/gct/web/front/product/list?pageNo=${this.pageNo}&pageSize=${this.pageSize}`;
        var idx = this.$route.params.id;
        var data = {
          categoryId: `${idx}`,
          orderType: 1,
        };

        request({
          method: "POST",
          url,
          headers: { "Content-Type": "application/json" },
          data: data,
        }).then((res) => {
          var arr = res.data.data.couponProducts.slice(
            this.pageNo,
            this.pageSize
          );
          arr.forEach((val) => {
            this.list.push(val.product);
          });
        });
      }, 1500);
    },
  },
  mounted() {
    window.addEventListener("scroll", this.f1, true);
  },
  created() {
    this.lazyLoading();
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/css/reset.css");
@import url("../assets/css/foodclassify.css");
</style>